<template>
  <el-button @click="router.push('/case/example/create')" v-if="$filters.auth($filters.PrivilegeType.Add)" class="button-header"  type="primary" :icon="Plus">添加实列</el-button>
  <el-form inline :model="query" class="filter" label-width="100px">
    <el-form-item label="实列名称：">
      <el-col :span="22">
        <el-input v-model="query.name" placeholder="请输入实列名称" />
      </el-col>
    </el-form-item>
    <el-form-item label="主办方：">
      <el-col :span="22">
        <el-input v-model="query.sponsor" placeholder="请输入主办方" />
      </el-col>
    </el-form-item>
    <el-form-item label="行业：">
      <el-col :span="22">
        <example-industry v-model="query.industryId" />
      </el-col>
    </el-form-item>
    <el-form-item label="分类：">
      <el-col :span="22">
        <example-category v-model="query.categoryId" />
      </el-col>
    </el-form-item>
    <el-form-item label="顾问：">
      <el-col :span="22">
        <example-adviser v-model="query.adviserId" />
      </el-col>
    </el-form-item>
    <el-form-item label="活动时间：">
      <el-col :span="22">
        <time-range v-model:begin-time="beginDateTime" v-model:end-time="endDateTime" @update:begin-time="beginDateTime  = $event" @update:end-time="endDateTime  = $event" />
      </el-col>
    </el-form-item>
    <el-form-item class="filter-actions">
      <el-button class="button-small" type="primary" @click="handleSearch">筛选</el-button>
      <el-button type="text" class="button-reset" @click="handleClear">重置筛选条件</el-button>
    </el-form-item> 
  </el-form>
  <Grid url="example/list" :params="query" orderbyName='Sequence' v-model:begin-date-time="beginDateTime" v-model:end-date-time="endDateTime" ref="datalist">
    <el-table-column prop="name" label="实列名称" />
    <el-table-column prop="sponsor" label="主办方">
      <template #default="scope">
        <div class="thumbnail">
          <el-avatar :src=" commonStore.setting.fileDomain + scope.row.thumbnail" />
          <span>{{scope.row.sponsor}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="categoryName" label="分类" />
    <el-table-column prop="industryName" label="行业" />
    <el-table-column prop="startDate" label="活动时间">
      <template #default="scope">
        {{ scope.row.startDate }} - {{ scope.row.endDate }}
      </template>
    </el-table-column>
    <el-table-column prop="adviserName" label="顾问" />
    <el-table-column prop="visits" label="游览数" />
    <el-table-column label="排序" sortable prop="sequence">
      <template #default="scope">
        <el-input-number v-model="scope.row.sequence" controls-position="right" @change="handleChangeSequence(scope.row)" :min="0" :max="99999999" />
      </template>
    </el-table-column>
    <el-table-column label="操作" align="right" width="200"  v-if="$filters.auth($filters.PrivilegeType.Edit) || $filters.auth($filters.PrivilegeType.Delete)">
      <template #default="scope">
        <el-button type="text" v-if="$filters.auth($filters.PrivilegeType.Edit)" @click="router.push(`/case/example/edit?id=${scope.row.id}`)" >编辑</el-button>
        <el-popconfirm :width="300" v-if="$filters.auth($filters.PrivilegeType.Delete)" class="btn-popconfirm" @confirm="handleDelete(scope.row.id)" confirmButtonText="确认" cancelButtonText="取消" title="确定要删除该员工吗？">
          <template #reference>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </Grid>
</template>
<script lang="ts" setup>
import { Plus } from '@element-plus/icons-vue'
import ExampleIndustry from '@/components/ExampleIndustry.vue'
import ExampleCategory from '@/components/ExampleCategory.vue'
import ExampleAdviser from '@/components/ExampleAdviser.vue'
import TimeRange from '@/components/TimeRange.vue'
import { ElMessage } from 'element-plus'
import { ref, onMounted } from 'vue'
import { useRouter} from 'vue-router'
import Grid from '@/components/Grid.vue'
import { ExampleDelete, ExampleUpdateSequence } from '@/api/example'
import { useCommonStore } from '@/stores/common'
import { deepClone } from '@/utils'
const commonStore = useCommonStore()
const router = useRouter()
/**
 * 搜索条件
 */
const query = ref<ExampleQuery>({
  name:'',
  sponsor:'',
  industryId:undefined,
  categoryId:undefined,
  adviserId:undefined
})

const beginDateTime =ref<Date>()
  const endDateTime =ref<Date>()
/**
 * 搜索
 */
const handleSearch = ():void => {
  datalist.value?.loadData()
}
/**
 * 清空
 */
const datalist = ref<InstanceType<typeof Grid>>()
  const handleClear = ():void => {
  query.value.name = ''
  query.value.sponsor = ''
  query.value.industryId = undefined
  query.value.categoryId = undefined
  query.value.adviserId = undefined
  beginDateTime.value = undefined
  endDateTime.value = undefined
  datalist.value?.loadData()
}

/**
 * 删除实列
 */
const handleDelete = (id:number):void => {
  ExampleDelete(id).then(((res:ServiceResponse<any>) => {
    if(res.success) {
          ElMessage.success('删除成功')
          datalist.value?.loadData()
        } else  ElMessage.error(res.msg)
  }))
}
const handleChangeSequence = (row:SiteCategory):void => {
 let category = deepClone(row)
 ExampleUpdateSequence(category.id,category.sequence).then((res:ServiceResponse<any>) => {
    if(res.success) {
          ElMessage.success('保存成功')
          datalist.value?.loadData()
        } else  ElMessage.error(res.msg)
  })
}

onMounted(() => {
   if(!commonStore.setting.fileDomain)
      commonStore.getSetting()
})
</script>
<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";
@import "@/assets/styles/tablePage.scss";
.thumbnail {
  display: flex;
  align-items:center;
  span {
    margin-left: 10px;
  }
}
</style>